<template>
	<div id="helper">
		<div class="main">
			<a href="#">
				<img class="logohp" src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/logo_gr.png">
			</a>
			<div class="TOM fr">
				<ul>
					<!-- <li><a href="#">TOM首页</a></li> -->
					<li>
						<router-link to="/shouye">TOM首页</router-link>
					</li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			<div class="hea_con">
				<h2>欢迎使用TOM服务中心</h2>
				<div class="con_se">
					<form>
						<input type="text" placeholder="请输入关键字如:VIP邮箱续费升级" maxlength="200" />
						<div class="con_sebtb serachbtn">
							<span><img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/top-Search.png"
								 width="20px" height="21px"></span>
							搜索
						</div>
					</form>
					<div class="con_se_re">
						<span>搜索热门：</span>
						<span><a href="#"> VIP邮箱</a> </span>
						<span><a href="#"> 续费升级</a> </span>
					</div>
				</div>
			</div>
		</div>
		<div class="VIP">
			<div class="tabs">
				<a href="#" v-for="(item,index) of tabs" :key="item" @mouseenter="MouserHover(index)">{{item}}</a>
			</div>
			<div class="tabs-content">
				<div>
					<ul v-show="sum==0">
						<li>
							<h6>常见退信原因分析，邮件为什么会被退信？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>常见退信原因分析，邮件为什么会被退信？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>

					</ul>
					<ul v-show="sum==1">
						<li>
							<h6>升级邮箱有哪些好处?</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>升级邮箱有哪些好处?</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>

					</ul>
					<ul v-show="sum==2">
						<li>
							<h6>企业邮箱为什么发送不了邮件？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>企业邮箱为什么发送不了邮件？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>
					<ul v-show="sum==3">
						<li>
							<h6>如此批量群发邮件，企业如何通过邮件营销精准引流？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>如此批量群发邮件，企业如何通过邮件营销精准引流？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>
					<ul v-show="sum==4">
						<li>
							<h6>如何在微信注册VIP邮箱？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>如何在微信注册VIP邮箱？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>
					<ul v-show="sum==5">
						<li>
							<h6>定制H5游戏做推广营销的好处有哪些？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>定制H5游戏做推广营销的好处有哪些？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>
					<ul v-show="sum==6">
						<li>
							<h6>在TOM网投放广告如何收费？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>在TOM网投放广告如何收费？</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>
					<ul v-show="sum==7">
						<li>
							<h6>seo搜索引擎优化排名，3天百度SEO排名首页</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
						<li>
							<h6>seo搜索引擎优化排名，3天百度SEO排名首页</h6>
							<span>
								<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tab_uljia.png">
							</span>
						</li>
					</ul>

				</div>
				<div class="tab-mores">
					<a href="#"> 更多「VIP邮箱」常见问题</a>
				</div>
			</div>
		</div>
		<!-- 我们的产品开始 -->
		<div class="ourProductsBox">
			<div class="ourProducts">
				<div class="txt">
					<span class="zuoing">
						<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_t_l.png">
					</span>
					<h3>我们的产品</h3>

					<span class="youimg">
						<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_t_l.png">
					</span>
					<p>Our&nbsp;product</p>
				</div>
				<div class="TomEmail">

					<ul>
						<li v-for="(item,xiabiao) of TomEmail" :key="xiabiao" :style="item.bgimg">
							<h4><img :src="item.email"></h4>
							<div class="mou-up" style="margin-top: 100px;">
								<div>
									<img :src="item.emailIcon">
								</div>
								<p>
									{{item.p1}}<br>
									{{item.p2}}
								</p>
							</div>
							<div class="mou-down">
								<a href="#">{{item.more}}</a>
							</div>
						</li>
					</ul>
				</div>
				<!--  -->
			</div>
		</div>
		<!-- 联系我们喀什 -->
		<div class="ContactusBox">
			<div class="Contactus">
				<div class="txt">
					<span class="pr_t_l"><img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_t_l.png">
					</span>
					<h3>联系我们</h3>
					<span class="pr_t_r"><img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_t_l.png">
					</span>
					<p>Contact us</p>
				</div>
				<div class="ct_ul">
					<ul>
						<li>
							<h5>客服咨询</h5>
							<img src="https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/code_c.png" class="code_c">
							<p>扫码添加官方微信，享受VIP管家服务</p>
						</li>
						<li>
							<h5>电话咨询</h5>
							<h6>010-85181164</h6>
							<p>VIP会员服务，高效应答</p>
						</li>
						<li>
							<h5>邮件咨询</h5>
							<h6>163vip@163.net</h6>
							<p>专属客服邮箱，邮件沟通更便捷</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 底部开始 -->
		<div class="footer_f w1">
			<div class="footer_con w1200">
				<div class="all-footer">
					<footer class="footer">
						<div class="foo_nav">
							<ol class="" style="flex-direction: row; justify-content: center;">
								<li class="breadcrumb-item"><a href="#" @click.prevent>TOM首页</a></li>
								<li class="breadcrumb-item"><a href="#" @click.prevent>vip.tom.com</a>
								</li>
								<li class="breadcrumb-item"><a href="#" @click.prevent>163.net</a></li>
								<li class="breadcrumb-item"><a href="#" @click.prevent>163vip.com</a>
								</li>
								<li class="breadcrumb-item">
									<a href="#" @click.prevent>最新资讯</a></li>
							</ol>
						</div>
						<div class="foo_ban">
							Copyright © 2019 TOM.COM Corporation,All Rights Reserved 雷霆万钧版权声明
						</div>
						<div class="foo_shen">
							<div class="">
								违法信息/未成年人举报：010-85181169 &nbsp;&nbsp; 举报邮箱/未成年人举报：jubao@tomonline-inc.com &nbsp;&nbsp;
								<a href="#" style="color:#fff;" @click.prevent>京公网安备
									11010502041454号</a>
							</div>
						</div>
					</footer>
				</div>
			</div>
		</div>
	</div>
</template>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	export default {
		name: "helper",
		data() {
			return {
				sum: 0, // 控制哪个显示
				tabs: ["VIP邮箱", "免费邮箱", "企业邮箱", "邮箱营销", "随心邮", "H5游戏", "TOM网站", "整合营销"], //tabs数组``
				TomEmail: [{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_vip.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico0.png",
						p1: "高端会员邮箱，注册即送靓号",
						p2: "无线容量，国际无忧收发",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-1.png)",
						more: "查看更多 →",
					},
					{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_qy.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico2.png",
						p1: "企业办公邮箱，全球邮畅",
						p2: "安全极速，买5年送5年！",
						// bgimg: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-2.png",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-2.png)",
						more: "查看更多 →",
					},
					{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_free.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico3.png",
						p1: "免费个人邮箱",
						p2: "支持批量注册",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-3.png)",
						more: "查看更多 → ",
					},
					{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_mak.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico4.png",
						p1: "专业的整合营销及拼配优化服务",
						p2: "免费定制价值9800元营销方案",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-4.png)",
						more: "查看更多 → ",
					},
					{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_tom.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico5.png",
						p1: "最新新闻热点资讯",
						p2: "三大搜索引擎，排名持久靠前！",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-5.png)",
						more: "查看更多 → ",
					},
					{
						email: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/tom_game.png",
						emailIcon: "https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/pr_ico6.png",
						p1: "聚合游戏平台",
						p2: "品牌曝光和活跃粉丝的有效途径",
						bgimg: "background-image:url(https://help.tom.com/system/modules/my.opencms.news/resources/tom/help/static/img/cp-bc-6.png)",
						more: "查看更多 → ",
					},
				]

			};
		},
		props: {

		},
		methods: {
			MouserHover(index) {
				this.sum = index;
			},

		},

	};
</script>
<style scoped="scoped">
	@import url("../assets/css/reset.css");
	@import url("../assets/css/helper.css");
	
</style>
